<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<meta name="format-detection" content="telephone=no, email=no"/>
	<meta charset="UTF-8">
	<title>商品详情</title>
	<link rel="stylesheet" href="themes/css/core.css">
	<link rel="stylesheet" href="themes/css/icon.css">
	<link rel="stylesheet" href="themes/css/home.css">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
	<style>
		.m-button {
			padding: 0 0.24rem;
		}

		.btn-block {
			text-align: center;
			position: relative;
			border: none;
			pointer-events: auto;
			width: 100%;
			display: block;
			font-size: 1rem;
			height: 2.5rem;
			line-height: 2.5rem;
			margin-top: 0.5rem;
			border-radius: 3px;
		}

		.btn-primary {
			background-color: #04BE02;
			color: #FFF;
		}

		.btn-warning {
			background-color: #FFB400;
			color: #FFF;
		}
		.mask-black {
			background-color: rgba(0, 0, 0, 0.6);
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			top: 0;
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-webkit-align-items: center;
			-ms-flex-align: center;
			align-items: center;
			z-index:999;
		}

		.m-actionsheet {
			text-align: center;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 1000;
			background-color: #fff;
			-webkit-transform: translate(0, 100%);
			transform: translate(0, 100%);
			-webkit-transition: -webkit-transform .3s;
			transition: -webkit-transform .3s;
			transition: transform .3s;
			transition: transform .3s, -webkit-transform .3s;
		}
		.actionsheet-toggle {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
		.actionsheet-item {
			display: block;
			position: relative;
			font-size: 0.8rem;
			color: #555;
			height: 2rem;
			line-height: 2rem;
			background-color: #FFF;
		}
		.actionsheet-item:after {
			content: '';
			position: absolute;
			z-index: 2;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1px;
			border-bottom: 1px solid #D9D9D9;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			-webkit-transform-origin: 0 100%;
			transform-origin: 0 100%;
		}
		.actionsheet-action {
			display: block;
			margin-top: .15rem;
			font-size: 0.8rem;
			color: #555;
			width:25px;
			height:25px;
			background-image: url('');
			background-repeat:no-repeat;
			background-size:25px;
			position:absolute;
			top:10px;
			right:10px;
		}

	</style>
</head>
<body>
	<div id="el">
	<header class="aui-header-default aui-header-fixed ">
		<a href="javascript:history.back(-1)" class="aui-header-item">
			<i class="aui-icon aui-icon-back"></i>
		</a>
		<div class="aui-header-center aui-header-center-clear">
			<div class="aui-header-center-logo">
				<div id="scrollSearchPro">
					<span class="current">商品</span>
					<span>评价</span>
					<span>详情</span>
				</div>
			</div>
		</div>
		<a href="javascript:;" class="aui-header-item-icon select"    style="min-width:0;">
			<i class="aui-icon aui-icon-share-pd selectVal" onselectstart="return false"></i>
			<div class="aui-header-drop-down selectList">
				<div class="aui-header-drop-down-san"></div>
				<div class="">
					<!--<p class="" onclick="location='http://www.a-ui.cn/'" >消息</p>-->
					<p class="" onclick="location='index.html'">首页</p>
<!--					<p class="" onclick="location='index.html'">帮助</p>-->
					<!--<p class="" onclick="location='index.html'">分享</p>-->
				</div>
			</div>
		</a>
	</header>
	<div class="aui-banner-content aui-fixed-top" data-aui-slider>
		<div class="aui-banner-wrapper">
			<div class="aui-banner-wrapper-item" v-for="hi in headImg">
				<a href="#">
					<img :src="hi.productImgHeadUrl">
				</a>
			</div>
		</div>
		<div class="aui-banner-pagination" >
			<span class="slider-pagination-item"></span>
			<!--<span class="slider-pagination-item" v-for="hi in headImg"></span>-->

		</div>

	</div>
	<div class="aui-product-content">
		<div class="aui-real-price clearfix">
			<span>
				<i>￥</i><span v-text="product.promotionPrice"></span>
			</span>
			<del><span class="aui-font-num">￥<span v-text="product.productPrice" class="aui-font-num"></span></del>
			<div class="aui-settle-choice">
				<span>促销价</span>
			</div>
		</div>
		<div class="aui-product-title">
			<h2 v-text="product.productDesc">
			</h2>
			<p>
				原封未拆，厂商授权！【服务】配送，7天无理由退货！
			</p>
		</div>
		<div class="aui-product-boutique clearfix">
			<img src="themes/img/icon/icon-sc.png" alt="">
			<span class="aui-product-tag-text">精选商品</span>
			<img src="themes/img/icon/icon-sj.png" alt="">
			<span class="aui-product-tag-text">精选店铺</span>
			<span class="aui-product-tag-text" style="float: right" v-text="product.productNum-product.productSales"></span>
			<span class="aui-product-tag-text" style="float: right">| 剩余</span>
			<span class="aui-product-tag-text" style="float: right" v-text="product.productSales"></span>
			<span class="aui-product-tag-text" style="float: right">已售</span>
		</div>

		<div class="aui-product-coupon">
			<a href="#" class="aui-address-cell aui-fl-arrow aui-fl-arrow-clear">
				<div class="aui-address-cell-bd">运费</div>
				<div class="aui-address-cell-ft">免运费</div>
			</a>
			<a href="#" class="aui-address-cell aui-fl-arrow aui-fl-arrow-clear">
				<div class="aui-address-cell-bd">说明</div>
				<div class="aui-address-cell-ft">假一赔十 7天无忧退货</div>
			</a>
		</div>
		<div class="aui-dri"></div>
		<div class="aui-product-evaluate">
			<a href="#" class="aui-address-cell aui-fl-arrow aui-fl-arrow-clear">
				<div class="aui-address-cell-bd">商品评价   <em></em></div>
				<div class="aui-address-cell-ft">
					<span>暂无评价</span>
				</div>
			</a>
		</div>
		<div class="aui-dri"></div>
		<div class="aui-product-evaluate" >
			<a href="javascript:" class="aui-address-cell aui-fl-arrow aui-fl-arrow-clear" @click="skipBusiness(business.businessId)">
				<div class="aui-address-cell-bd">
					<div class="clearfix">
						<div class="aui-product-shop-img">
							<img :src="business.businessImg" alt="">
						</div>
						<div class="aui-product-shop-text">
							<h3 v-text="business.businessName"></h3>
							<p>精选商家  服务保障</p>
							<p>在售商品<span>2390</span>件</p>
						</div>
					</div>
				</div>
				<div class="aui-address-cell-ft">
					<!--<a href="store.html">--><span>进店看看</span><!--</a>-->
				</div>
			</a>
		</div>

		<div class="aui-dri"></div>
		<div class="aui-product-pages">
			<div class="aui-product-pages-title">
				<h2>图文详情</h2>
			</div>
			<div class="aui-product-pages-img" v-for="img in imgDetail">
				<img :src="img.productImgDetailUrl" alt="">

			</div>
		</div>

	</div>

	<footer class="aui-footer-product">
		<div class="aui-footer-product-fixed">
			<div class="aui-footer-product-concern-cart">
				<!--<a href="#">
					<span class="aui-f-p-icon"><img src="themes/img/icon/icon-kf.png" alt=""></span>
					<span class="aui-f-p-focus-info">客服</span>
				</a>
				<a href="#">
					<span class="aui-f-p-icon"><img src="themes/img/icon/icon-sc.png" alt=""></span>
					<span class="aui-f-p-focus-info">收藏</span>
				</a>-->
				<a href="javascript:" @click="skipBusiness(business.businessId)">
					<span class="aui-f-p-icon"><img src="themes/img/icon/icon-dp.png" alt=""></span>
					<span class="aui-f-p-focus-info">店铺</span>
				</a>
			</div>
			<div class="aui-footer-product-action-list">
				<a href="javascript:" class="yellow-color" @click="shoppingCar()" style="float: right">加入购物车</a>
				<!--<a href="order.html" class="red-color">立即购买</a>-->
			</div>
		</div>
	</footer>
	</div>

	<script src="themes/js/jquery.min.js"></script>
	<script src="themes/js/aui.js"></script>
	<script src="themes/js/aui-down.js"></script>
	<script type="text/javascript" src="themes/js/city.js"></script>
	<script src="themes/js/vue.js"></script>
	<script type="text/javascript" >
		//自己写的内容
		var vue = new Vue({
			el:"#el",
			data:{
				headImg:[],
				product:{},
				imgDetail:[],
				business:{}
			},
			created:function(){
				this.init();
			},
			Mounted:function(){

			},
			methods:{
				init:function(){
					//获取首页传过来的商品id
					var productId=window.location.search.substr(1).split("=")[1];//.split("#")[0]
					var _this = this;
					//商品轮播图
					$.ajax({
						type:"get",
						url:"/ShoppingMallHome/getProductImgHeadByProductId",
						data:{"productId":productId},
						dataType:"json",
						success:function(da){
							// console.log(da);
							_this.headImg = da.li;
						}
					});
					//商品详情
					$.ajax({
						type:"get",
						url:"/ShoppingMallHome/getProductByProductId",
						data:{"productId":productId},
						dataType:"json",
						success:function(da){
							//console.log(da);
							_this.product = da.obj;
						}
					});
					//商品图文详情
					$.ajax({
						type:"get",
						url:"/ShoppingMallHome/getProductImgDetailByProductId",
						data:{"productId":productId},
						dataType:"json",
						success:function(da){
							// console.log(da);
							_this.imgDetail = da.li;
						}
					});
					//获取商品商家信息
					$.ajax({
						type:"get",
						url:"/ShoppingMallHome/getProductBusinessByProductId",
						data:{"productId":productId},
						dataType:"json",
						success:function(da){
							// console.log(da);
							for (var i = 0; i <da.li.length ; i++) {
								_this.business = da.li[0];
								console.log(da.li[0])
							}
						}
					});
				},
				//往购物车添加商品
				shoppingCar:function(){
					var productId = this.product.productId;
					//商品图文详情
					$.ajax({
						type:"get",
						url:"/ShoppingMallCar/insertProduct",
						data:{"productId":productId},
						dataType:"json",
						success:function(da){
							alert("添加成功");
						}
					});

				},
				skipBusiness:function (e) {
					console.log(e);
					location.href="store.html?businessId="+e;
				}
			}

		});

		//轮播图问题？？
		// var aa = 0;
		// var set = setInterval(function f() {
		// 	var hehe = $(".slider-pagination-item");
		// 	for(var i = 0;i < hehe.length;i++){
		// 		if(i == aa){
		// 			$(hehe[i]).siblings().removeClass("slider-pagination-item-active")
		// 			$(hehe[i]).addClass("slider-pagination-item-active");
		// 		}
		// 	}
		// 	aa++;
		// 	if(aa == hehe.length){
		// 		aa = 0;
		// 	}
		// },2000);
		// clearInterval(定时器名)

	</script>
	<script type="text/javascript" >
        /**
         * Javascript API调用Tab
         */
        !function ($) {
            var $tab = $('#J_Tab');

            $tab.tab({
                nav: '.tab-nav-item',
                panel: '.tab-panel-item',
                activeClass: 'tab-active'
            });

			/*
			 $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
			 console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
			 });
			 */

            $tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
                console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
            });
        }(jQuery);
	</script>
	<script>
        /**
         * 默认调用
         */
        !function () {
            var $target = $('#J_Address');

            $target.citySelect();

            $target.on('click', function (event) {
                event.stopPropagation();
                $target.citySelect('open');
            });

            $target.on('done.ydui.cityselect', function (ret) {
                $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
            });
        }();
        /**
         * 设置默认值
         */
        !function () {
            var $target = $('#J_Address2');

            $target.citySelect({
                provance: '新疆',
                city: '乌鲁木齐市',
                area: '天山区'
            });

            $target.on('click', function (event) {
                event.stopPropagation();
                $target.citySelect('open');
            });

            $target.on('done.ydui.cityselect', function (ret) {
                $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
            });
        }();
	</script>
	<script type="text/javascript">
        $(function () {
            //绑定滚动条事件
            //绑定滚动条事件
            $(window).bind("scroll", function () {
                var sTop = $(window).scrollTop();
                var sTop = parseInt(sTop);
                if (sTop >= 100) {
                    if (!$("#scrollSearchPro").is(":visible")) {
                        try {
                            $("#scrollSearchPro").slideDown();
                        } catch (e) {
                            $("#scrollSearchPro").show();
                        }
                    }
                }
                else {
                    if ($("#scrollSearchPro").is(":visible")) {
                        try {
                            $("#scrollSearchPro").slideUp();
                        } catch (e) {
                            $("#scrollSearchPro").hide();
                        }
                    }
                }
            });
        })
	</script>

	<script>
        /**
         * Javascript API调用ActionSheet
         */
        !function ($) {
            var $myAs = $('#J_ActionSheet');

            $('#J_ShowActionSheet').on('click', function () {
                $myAs.actionSheet('open');
            });

            $('#J_Cancel').on('click', function () {
                $myAs.actionSheet('close');
            });

        }(jQuery);
	</script>


</body>
</html>